<template>
  <div class="map" id="map"></div>
</template>

<script>
import * as echarts from 'echarts'
import jilin from './map.json'
export default {
  data() {
    return {
      geoCoordMap: {
        首车镇: [109.7088761, 29.09955699],
        芙蓉镇: [109.97224, 28.7832],
        永茂镇: [110.279823, 29.0074271],
        小溪镇: [117.29944, 24.362112],
        青坪镇: [109.940538, 28.3161323],
        石堤镇: [109.83063, 29.2018204],
        万坪镇: [109.83063, 29.2018204], // 注意：与石堤镇坐标重复
        塔卧镇: [109.959584, 29.1929735],
        砂坝镇: [110.0187569, 29.270381046],
        灵溪镇: [120.38418, 27.499097],
        松柏镇: [110.661631, 31.746937],
        泽家镇: [109.7774, 28.85261],
        两岔乡: [109.78215, 28.84946],
        高坪乡: [109.7782049, 28.85302197],
        润雅乡: [109.7782049, 28.85302197], // 注意：与高坪乡坐标重复
        车坪乡: [109.7782049, 28.85302197], // 注意：同上重复坐标
        盐井乡: [109.7782049, 28.85302197], // 注意：同上重复坐标
        颗砂乡: [109.7782049, 28.85302197], // 注意：同上重复坐标
      },
      testData: [
        { name: '首车镇', value: '0' },
        { name: '芙蓉镇', value: '0' },
        { name: '永茂镇', value: '0' },
        { name: '小溪镇', value: '0' },
        { name: '青坪镇', value: '0' },
        { name: '石堤镇', value: '0' },
        { name: '万坪镇', value: '0' },
        { name: '塔卧镇', value: '0' },
        { name: '砂坝镇', value: '0' },
        { name: '灵溪镇', value: '0' },
        { name: '松柏镇', value: '0' },
        { name: '泽家镇', value: '0' },
        { name: '两岔乡', value: '0' },
        { name: '高坪乡', value: '0' },
        { name: '润雅乡', value: '0' },
        { name: '车坪乡', value: '0' },
        { name: '盐井乡', value: '0' },
        { name: '颗砂乡', value: '0' },
      ],
    }
  },
  created() {},
  mounted() {
    this.drawMap()
  },
  methods: {
    drawMap() {
      // 判断地图是否渲染
      let myChart = echarts.getInstanceByDom(document.getElementById('map'))
      // 如果渲染则清空地图
      if (myChart != null) {
        myChart.dispose()
      }
      // 初始化地图
      myChart = echarts.init(document.getElementById('map'))

      echarts.registerMap('jilin', jilin)

      var option = {
        geo: [
          {
            map: 'jilin',
            zoom: 1.2, // 默认显示级别
            itemStyle: {
              //设置地图板块配置选项
              normal: {
                // 图形的描边颜色
                borderColor: '#55aaff',
                // 描边线宽。
                borderWidth: 1,
                // 柱条的描边类型。
                borderType: 'solid',
                areaColor: '#083D7E',
              },
              // // 鼠标放上去后，样式改变
              emphasis: {
                // 图形的描边颜色
                borderColor: '#1DF9FC',
                borderWidth: '2',
                // 阴影色
                areaColor: '#3099E2',
              },
            },
            label: {
              show: false,
              formatter: '',
            },
          },
        ],
        series: [
          // 柱状体的主干
          {
            type: 'lines',
            zlevel: 5,
            effect: {
              show: false,
              symbolSize: 5, // 图标大小
            },
            lineStyle: {
              width: 20, // 尾迹线条宽度
              color: 'rgb(22,255,255, .6)',
              opacity: 1, // 尾迹线条透明度
              curveness: 0, // 尾迹线条曲直度
            },
            silent: true,
            data: this.lineData(),
          },
          // 柱状体的顶部
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            geoIndex: 0,
            zlevel: 5,
            label: {
              show: true,
              formatter: function (e) {
                return `数值：${e.data[2]}`
              },
              position: 'top',
            },
            symbol: 'circle',
            symbolSize: [20, 10],
            itemStyle: {
              color: 'rgb(22,255,255, 1)',
              opacity: 1,
            },
            silent: true,
            data: this.scatterTopData(),
          },
          // 柱状体的底部
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            geoIndex: 0,
            zlevel: 4,
            label: {
              // 这儿是处理的
              formatter: '{b}',
              position: 'bottom',
              color: '#fff',
              fontSize: 12,
              distance: 10,
              show: true,
            },
            symbol: 'circle',
            symbolSize: [20, 10],
            itemStyle: {
              // color: '#F7AF21',
              color: 'rgb(22,255,255, 1)',
              opacity: 1,
            },
            silent: true,
            data: this.scatterBottomData(),
          },
          // 底部外框
          {
            type: 'effectScatter',
            rippleEffect: {
              //涟漪特效相关配置
              period: 4, //动画的周期，秒数，值越小速度越快
              brushType: 'stroke', //波纹的绘制方式，可选 'stroke' 和 'fill'
              scale: 2, //动画中波纹的最大缩放比例，值越大波纹越大 4
              color: 'rgb(22,255,255, 1)', //涟漪的颜色
              number: 2, //波纹的数量
            },
            coordinateSystem: 'geo',
            geoIndex: 0,
            zlevel: 4,
            label: {
              show: false,
            },
            symbol: 'circle',
            symbolSize: [40, 20],
            itemStyle: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgb(22,255,255, 0)', // 0% 处的颜色
                  },
                  {
                    offset: 0.74,
                    color: 'rgb(22,255,255, 0)', // 100% 处的颜色
                  },
                  {
                    offset: 0.75,
                    color: 'rgb(22,255,255, 1)', // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgb(22,255,255, 1)', // 100% 处的颜色
                  },
                ],
              },
            },
            data: this.scatterBottomData(),
          },
        ],
      }
      myChart.setOption(option)
    },

    // 动态计算柱形图的高度
    lineMaxHeight() {
      const maxValue = Math.max(...this.testData.map((item) => item.value))
      return 0.9 / maxValue
    },
    // 柱状体的主干
    lineData() {
      let { testData, geoCoordMap } = this
      return testData.map((item) => {
        return {
          coords: [
            geoCoordMap[item.name],
            [
              geoCoordMap[item.name][0],
              geoCoordMap[item.name][1] + item.value * this.lineMaxHeight(),
            ],
          ],
        }
      })
    },
    // 柱状体的顶部
    scatterTopData() {
      let { testData, geoCoordMap } = this
      return testData.map((item) => {
        return [
          geoCoordMap[item.name][0],
          geoCoordMap[item.name][1] + item.value * this.lineMaxHeight(),
          item.value,
        ]
      })
    },
    // 柱状体的底部
    scatterBottomData() {
      let { testData, geoCoordMap } = this
      return testData.map((item) => {
        return {
          name: item.name,
          value: geoCoordMap[item.name],
        }
      })
    },
  },
}
</script>

<style scoped>
.map {
  width: 800px;
  height: 600px;
  position: relative;
}
</style>
